//渲染页面
var shopS = document.querySelector(".shopS")
var tfoot = document.querySelector("tfoot")
function xuanRan(shopS, lists) {

    lists.forEach(function (val) {
        //计算每个商品可以省的钱
        let saveTotal = val.num * (val.oriPrice - val.nowPrice)
        //渲染商品列表
        shopS.innerHTML += `
        <tr class="shopList" index = "${val.id}">
        <td class="imgTd"><img class="shops" src="../images/${val.img}" alt="" srcset=""></td>
        <td class="titleTd">
            <h6>${val.title}</h6>
            <span>ID:#${val.id}</span>
            <span>Size:${val.size}</span>
        </td>
        <td class="Son2">
            <span class="reduce">-</span>
            <input type="text" value="${val.num}" class="count">
            <span class="add">+</span>
        </td>
        <td class="Son3">
            <del class="oriPrice">${val.oriPrice} py6</del>
            <b class="nowPrice">${val.nowPrice} py6</b>
        </td>
        <td class="Son4">
            <span class="priceAll">${(val.oriPrice * val.num).toFixed(2)} py6</span>
            <span class="saveAll">You save ${(saveTotal).toFixed(2)} py6</span>
        </td>
        <td class="Son5">
            <img class="del" idx = "${val.id}" src="../images/del.png" alt="">
        </td>
    </tr>`

    })
    //渲染脚部
    tfoot.innerHTML = `<tr class="countall">
    <td>
        <span>
            <i class="iconL"></i>
            Continue Shopping
        </span>
    </td>
    <td class="countRight">
        <span class="cartall">
            Cart Total
            <b>1929.45 py6.</b>
        </span>
        <span class="savetall">
            Your?Total?Saving:579.47?py6.
        </span>
        <button>
            PROCEED TO CHECKOUT
            <i class="iconR"></i>
        </button>
    </td>
    </tr>`
    
    var cartall = document.querySelector('.cartall');
    var savetall = document.querySelector('.savetall');
    //计算总计和省的钱
    var carTotal = lists.reduce(function (pre, val) {
        return pre + val.nowPrice * val.num;
    }, 0)
    cartall.firstElementChild.innerHTML = carTotal.toFixed(2)
    var saveTotal = lists.reduce(function (pre, val) {
        return pre + (val.oriPrice - val.nowPrice) * val.num
    }, 0)
    savetall.innerHTML = `Your?Total?Saving:${saveTotal.toFixed(2)}?py6.`
    
}
xuanRan(shopS, lists)


var shop = document.querySelector(".shop")
//点击加，数量增加；点击减，数量减少
shop.onclick = function (e) {
    //点击删除商品（委托事件）
    var res = e.target;
    var index = res.getAttribute("idx");
    lists.forEach(function (val, idx) {
        if (val.id == index) {
            lists.splice(idx, 1)
        }
    })
    shopS.innerHTML = `<tr class="nav">
        <th class="Son1">Your Item(s)</th>
        <th class="Son2">Quantity</th>
        <th class="Son3">Price</th>
        <th class="Son4">Total Price</th>
        <th class="Son5">Remove</th>
    </tr>`;
    xuanRan(shopS, lists)

    switch (e.target.className) {
        case "add":
            // 找到shopList的父元素
            var _tr = e.target.parentNode.parentNode;
            //获取父元素的index属性值‘
            var _id = _tr.getAttribute("index");
            // 遍历原始数据
            lists.forEach(function (val) {
                //找到点击时获取的index与原始数据对比匹配
                if (_id == val.id) {
                    val.num += 1;
                    console.log(val.num)
                    shopS.innerHTML = `<tr class="nav">
                        <th class="Son1">Your Item(s)</th>
                        <th class="Son2">Quantity</th>
                        <th class="Son3">Price</th>
                        <th class="Son4">Total Price</th>
                        <th class="Son5">Remove</th>
                    </tr>`;
                    xuanRan(shopS, lists);
                }
            })
            break
        case "reduce":
            var _tr = e.target.parentNode.parentNode;
            var _id = _tr.getAttribute("index");
            lists.forEach(function (val) {
                if (_id == val.id && val.num > 1) {
                    val.num -= 1;
                    console.log(val.num)
                    shopS.innerHTML = `<tr class="nav">
                            <th class="Son1">Your Item(s)</th>
                            <th class="Son2">Quantity</th>
                            <th class="Son3">Price</th>
                            <th class="Son4">Total Price</th>
                            <th class="Son5">Remove</th>
                        </tr>`;
                    xuanRan(shopS, lists);
                }
            })
            break
    }

}


